<template>
	<view>
		<tpbtn :showMask="showMask" :list="lists" :routeUrl="routeUrl" @customEvent="receiveValueFromChild"
			@customEvents="receiveValueFromChilds"></tpbtn>
		<view class="list-item flex-center pd-lg fill-base radius-16 rel" v-for="item in storeList">
			<image mode="aspectFill" class="king-img" :src="item.cover" v-if="item.cover" @click="goDetail(item.id)">
			</image>
			<view class="flex-1 ml-md max-510">
				<view class="flex-between" @click="goDetail(item.id)">
					<view>
						<view class="flex-y-center f-title c-title">
							<view class="text-bold  ellipsis">{{item.title}}</view>
						</view>
						<view class="flex-y-center f-icontext mt-sm">
							<view class="flex-y-center"><i class="iconfont iconyduixingxingshixin icon-font-color"></i>
								<view class="star-text">{{item.star}}</view>
							</view>
							<view class="order-num">
								已服务 {{item.order_num > 9999 ? '9999+' : item.order_num}}单</view>
						</view>
						<!-- <view class="flex-y-center f-icontext mt-sm mb-sm">
							<view class="flex-center">
								<i class="iconfont iconjuli" :style="{color:primaryColor}"></i>
								<view class="f-desc c-title ml-sm">{{item.distance}}</view>
							</view>
						</view> -->
					</view>
					<view class="can-service-btn f-caption c-base radius-10" :style="{border:`2rpx solid ${primaryColor}`}">
						<view class="text" :style="{background: `linear-gradient(68deg, ${primaryColor}, ${subColor})`}">营业时间</view>
						<view class="time" :style="{color:primaryColor}">{{item.start_time}}-{{item.end_time}}</view>
					</view>
				</view>
				<view class="flex-between">
					<view class="flex-y-center f-desc c-caption">
						<view class="flex-y-center ">
							联系方式:{{item.phone}}
						</view>
					</view>
					<!-- 	<auth @tap.stop.prevent :needAuth="userInfo && (!userInfo.phone || !userInfo.nickName)" :must="true"
						:type="!userInfo.phone ? 'phone' : 'userInfo'" @go="toEmit('order',item.lat,item.lng,item.title)" style="width:130rpx;">
						<view class="item-btn flex-center f-desc c-base"
							:style="{background: `linear-gradient(68deg, ${primaryColor}, ${subColor})`}">
							导航
						</view>
					</auth> -->
					<auth style="width:130rpx;">
						<view class="item-btn flex-center f-desc c-base" @click="goDetail(item.id)"
							:style="{background: `linear-gradient(68deg, ${primaryColor}, ${subColor})`}">
							查看
						</view>
					</auth>
				</view>
			</view>
		</view>
		<tabbar :cur="2" @customEvent="receiveValueFromChild" :showMask="showMask"></tabbar>
	</view>
</template>
<script>
	import {
		mapState,
		mapActions,
		mapMutations
	} from "vuex"
	import tabbar from "@/components/tabbar.vue"
	import tpbtn from "@/components/tpbtn.vue"
	export default {
		components: {
			tabbar,
			tpbtn
		},
		data() {
			return {
				storeList: [],
				showMask: false,
				lists: [],
				routeUrl: 2
			}
		},
		async onLoad(option) {
			this.getAddress()
			this.initIndex()
			await this.getinfocate();
		},
		computed: mapState({
			configInfo: state => state.config.configInfo,
			primaryColor: state => state.config.configInfo.primaryColor,
			subColor: state => state.config.configInfo.subColor,
			userInfo: state => state.user.userInfo,
		}),
		methods: {
			...mapActions(['getUserInfo']),
			async getinfocate() {
				var info = await this.$api.zxcadd.articleCate();
				this.lists = info;
			},
			receiveValueFromChild(data) {
				this.showMask = data;
			},
			receiveValueFromChilds(data) {
				this.id = data.id;
				uni.setNavigationBarTitle({
					title: data.name
				});
				this.page = 1
				this.list = []
				this.getlist();
			},
			goDetail(id) {
				uni.navigateTo({
					url: '/user/pages/storeDetail?id=' + id
				})
			},

			async getNearStoreList(param) {
				let res = await this.$api.shopstore.nearStoreList(param)
				this.storeList = res
				this.$util.hideAll()
			},
			async getAddress() {
				// #ifdef H5
				if (this.$jweixin.isWechat()) {
					this.$util.showLoading()
					await this.$jweixin.wxReady2();
					let {
						latitude: lat = 0,
						longitude: lng = 0
					} = await this.$jweixin.getWxLocation()
					if (!lat) {
						this.$util.hideAll()
						this.$util.showToast({
							title: `请授权定位当前地址`
						})
						return
					}
					if (lat && lng) {
						let key = `${lat},${lng}`
						let data = await this.$api.base.getMapInfo({
							location: key
						})
						let {
							status,
							result
						} = JSON.parse(data)
						if (status == 0) {
							this.$util.hideAll()
							this.getNearStoreList({
								lat,
								lng,
							})
						}
					}
				}
				// #endif
				// #ifndef H5
				this.$util.showLoading()
				let {
					lat = '',
						lng = '',
				} = await this.$util.getBmapLocation()
				if (!lat) {
					this.$util.hideAll()
					this.$util.showToast({
						title: `请授权定位当前地址`
					})
					return
				}
				this.getNearStoreList({
					lat,
					lng,
				})
				// #endif
			},
			async initIndex(refresh = false) {
				// #ifdef H5
				if (!refresh && this.$jweixin.isWechat()) {
					await this.$jweixin.initJssdk();
					this.$jweixin.wxReady(() => {
						this.$jweixin.hideOptionMenu()
					})
				}
				// #endif
				await this.getUserInfo()
				this.$util.setNavigationBarColor({
					bg: this.primaryColor
				})
			},
			toEmit(key, lat, lng, title) {
				console.log(lat, lng, 99999)
				// #ifdef H5
				window.location.href = "https://uri.amap.com/marker?position=" + lng + "," + lat + "&name=" + title
				// #endif
				this.$emit(key)
			}
		},
	}
</script>
<style lang="scss">
	.list-item {
		.top-tag {
			width: 40rpx;
			height: 30rpx;
			color: #B75E1D;
			background: linear-gradient(90deg, #DFB885 0%, #FCE0AD 100%);
			border-radius: 8rpx 0 8rpx 0;
			top: 0;
			left: 0;
		}

		.item-img {
			width: 124rpx;
			height: 124rpx;
		}

		.king-img {
			width: 120rpx;
			height: 120rpx;
			// top: 110rpx;
			// left: -15rpx;
			z-index: 1;
		}


		.top-img {
			width: 146rpx;
			height: 140rpx;
			top: -7rpx;
			left: -11rpx;
		}

		.hot-img {
			width: 75rpx;
			height: 51rpx;
			top: 77rpx;
			left: 25rpx;
		}

		.new-img {
			width: 38rpx;
			height: 52rpx;
			top: 83rpx;
			left: 78rpx;
		}

		.item-tag {
			width: 100rpx;
			height: 32rpx;
			color: #000;
			background: rgba(216, 216, 216, 0.3);
			margin-top: 19rpx;
			margin-bottom: 6rpx;
		}

		.more-img {
			width: 94rpx;
			height: 33rpx;
			border-radius: 3px;
			transform: rotateZ(1turn);
		}

		.can-service-btn {
			height: 80rpx;
			margin-bottom: 30rpx;
			width: 150rpx;

			.bg {
				width: 64rpx;
				height: 28rpx;
				opacity: 0.1;
				border-radius: 3rpx;
				top: 0;
				left: 0;
				z-index: 1;
			}

			.text {
				height: 40rpx;
				line-height: 40rpx;
				text-align: center;
				width: 100%;
			}

			.time {
				height: 40rpx;
				line-height: 40rpx;
				text-align: center;
				width: 100%;
			}
		}

		.iconyduixingxingshixin {
			font-size: 28rpx;
			background-image: -webkit-linear-gradient(270deg, #FAD961 0%, #F76B1C 100%);
		}

		.star-text {
			color: #FF9519;
			margin-left: 6rpx;
		}

		.order-num {
			color: #4D4D4D;
			margin-left: 16rpx;
		}

		.item-btn {
			width: 130rpx;
			height: 52rpx;
			border-radius: 100rpx;
		}
	}
</style>